{% extends 'base.html' %}
{% load static %}
{% block head %}
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script type="text/javascript">

    	var gnum = 0;
        $(function(){

        	// 点击增加按钮
            $(".add").click(function(){
                element = $(this).next();
                count = parseInt(element.val());
                if (count < 99) {
                    count++;
                }
                element.val(count);
                // 把数据同步到数据库
                cart_id = $(this).parents('.cart_list_td').attr('id');
                url = '/cart/edit' + cart_id + '_' + count;
                $.get(url, function(data){
                    if(data.ok == 1) {
                        alert("发生了错误");
                    }
                });
                // 重新计算总价
                calculateTotal();
            });
            // 点击减少按钮
            $(".minus").click(function(){
                element = $(this).prev();
                count = parseInt(element.val());
                if (count > 1) {
                    count--;
                }
                element.val(count);
                // 把数据同步到数据库
                cart_id = $(this).parents('.cart_list_td').attr('id');
                url = '/cart/edit' + cart_id + '_' + count;
                $.get(url, function(data){
                    if(data.ok == 1) {
                        alert("发生了错误");
                    }
                });
                // 重新计算总价
                calculateTotal();
            });
            // 直接修改数量并失去焦点事件
            $(".num_show").blur(function(){
                element = $(this);
                count = parseInt(element.val());
                if(count > 99) {
                    count = 99;
                } else if (count < 1) {
                    count = 1;
                }
                element.val(count);
                // 把数据同步到数据库
                cart_id = $(this).parents('.cart_list_td').attr('id');
                url = '/cart/edit' + cart_id + '_' + count;
                $.get(url, function(data){
                    if(data.ok == 1) {
                        alert("发生了错误");
                    }
                });
                // 重新计算总价
                calculateTotal();
            });
            // 勾选总开关
            $(".settlements").children(".col01").children("input").click(function(){
                if($(this).prop("checked")) {
                    $(".cart_list_td").children(".col01").children("input").prop("checked", true);
                } else {
                    $(".cart_list_td").children(".col01").children("input").prop("checked", false);
                }
                // 重新计算总价
                calculateTotal();
            });
            // 勾选单个开关
            $(".cart_list_td").children(".col01").children("input").click(function(){
                // 计算当前有多少个复选框被选中
                selectedGood = $(".cart_list_td").children(".col01").children("input:checked").length;
                // 计算总共有多少个复选框
                countGood = $(".cart_list_td").children(".col01").children("input").length;
                // 如果全部选中 则勾选全选框的勾
                if(selectedGood == countGood) {
                    $(".settlements").children(".col01").children("input").prop("checked", true);
                } else {
                    $(".settlements").children(".col01").children("input").prop("checked", false);
                }
                // 重新计算总价
                calculateTotal();
            });
        });
        // 删除商品
        function cart_del(cart_id) {
            ret = confirm("你确定要删除吗？");
            if(ret) {
                url = '/cart/delete' + cart_id;
                $.get(url, function(data){
                    if(data.ok == 0) {
                        alert("删除成功");
                        $("ul").remove("#" + cart_id);
                    }
                });
                // 重新计算总价
                calculateTotal();
            }
        }
        // 计算总价
        function calculateTotal() {
            var sumTotal = 0; // 商品总价钱
            var countGood = 0; // 商品总数量
            // 参数1 index 当前是第几个 .col07
            // 参数2 element 当前 .col07的完整的元素
            $(".col07").each(function(index, element){
                // 获取数量 col06下面的num_show
                count = $(element).prev().find('.num_show').val();
                // 获取单价 col05
                price = parseFloat($(element).prev().prev().text());
                // 小鸡 = 数量 * 单价
                total = count * price;
                //console.log("total = " + total);
                // 更新显示小鸡的内容
                $(element).text(total.toFixed(2) + '元');
                // 计算总价钱和总数量(只有最前面的复选框被勾选后才能计算)
                if($(element).siblings(".col01").find("input").prop("checked")) {
                    sumTotal += total;
                    countGood++;
                }
                // 更新显示的总价钱和总数量
                $("#sumtotal").text(sumTotal.toFixed(2));
                $(".countGood").text(countGood);
            });
        }
        function posttotal(){
        var sum = $('#sumtotal').text();
        var checkId = [];
           if(sum==0){
           alert("提示：请在购物车内选择至少一件商品。")
           }else{

           $("input[name = 'goodslist']:checked").each(function(i){
                checkId[i] = $(this).val();
           });
           $.ajax({
                    type: 'POST',
                    url: '/order/get_checkedgoods',
                    dataType: 'text',
                    data : {
                    checkId : checkId,
                    },
                    traditional: true,
                    success:function(data){
                    //alert(data);
                    console.log(data);
                    //window.location.href ="/order/get_checkedgoods";
                     location.href = '/order/ ';
                    }
                });

           }
        }
         $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{csrf_token}}'}
        });
    </script>
{% endblock head %}

{% block body %}


	<div class="total_count">全部商品<em class="countGood">0</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>

<!--<form action="/order/get_checkedgoods" method="POST">-->
	{% for cart in carts %}
    <ul class="cart_list_td clearfix"  id="{{cart.id}}" >
        <li class="col01"><input type="checkbox" id="id" name="goodslist" value="{{cart.goods.id}}" ></li>
        <li class="col02"><img src="{{STATIC_URL}}{{cart.goods.gpic}}"></li>
        <li class="col03">{{cart.goods.gtitle}}<br><em>{{cart.goods.gunit}}</em></li>
        <li class="col04">500g</li>
        <li class="col05">{{cart.goods.gprice}}</li>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" class="num_show fl" value="{{cart.count}}">
                <a href="javascript:" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07" id="total"></li>
        <li class="col08"><a href="javascript:cart_del({{cart.id}});">删除</a></li>
    </ul>
    {% endfor %}

	<ul class="settlements">
        <li class="col01"><input type="checkbox" name="select_all" ></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em id="sumtotal">0.00</em><br>共计<b class="countGood">0</b>件商品</li>
        <li class="col04"><a  onclick="posttotal()" value="去结算">去结算</a></li>
    </ul>
<!--</form>-->
{% endblock body %}

